<style>
    * {
        font-family: 微软雅黑;
    }

    .head_bg img {
        margin: 0 auto;
        display: block;
        width: 100%;
        height: auto;
        background-size: 100% 100%;
    }

    .head_title {
        text-align: center;
        font-size: 18px;
        margin-top: 20px;
        color: #000000;

    }

    .head_intro {
        text-align: center;
        margin-top: 10px;
    }

    .time {
        color: #d8b37e;
        margin-left: 10px;
        /*font-size: 18px;*/
        margin-top: 3px;
    }

    .intro {
        margin-top: 20px;
        text-indent: 25px;
        line-height: 30px;
    }

    .dash {
        border: 2px dashed #cccccc;
    }

</style>

<!--<div class="modal fade bs-example-modal-static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"-->
<!--data-backdrop="static" aria-hidden="true">-->
<!--<div class="modal-dialog" role="document">-->
<!--<div class="modal-content">-->
<!--<div class="modal-header">-->
<!--<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>-->
<!--<h4 class="modal-title">图片上传</h4>-->
<!--</div>-->


<!--</div>-->
<!--</div>-->
<!--</div>-->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增展位</h4>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" method="post" class="form-horizontal  form-label-left"
                      id="saveIchnographyForm">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="file" id="imgFile" name="imgFile"/>
                            <input type="hidden" id="literatureImg" name="literatureImg"/>
                        </div>
                    </div>
                    <div class="form-group" id="btn-su">
                        <div class="col-lg-12">
                            <input type="file" id="papersFile" name="papersFile"/>
                            <input type="hidden" id="literatureFile" name="literatureFile"/>
                        </div>

                    </div>
                    <input type="hidden" id="exhibtionId" name="exhibtionId" th:value="${exhibtionId}"/>
                    <div class="form-group" style="margin-top: 20px">
                        <!--<label class="control-label col-md-3 col-sm-3" for="literatureTitle1">文章标题-->
                        <!--</label>-->
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="literatureTitle1"
                                   name="literatureTitle" placeholder="文章标题">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="literatureContent1"
                                   name="literatureContent" placeholder="文章内容">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" name="literatureX" id="literatureX"
                                   placeholder="x轴坐标" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" name="literatureY" id="literatureY"
                                   placeholder="y轴坐标" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <select name="literatureType" id="select"  class="form-control"
                                placeholder="文章类型"
                                style="width: 100%;height: 100%;">
                            <option value="">--请选择--</option>
                            <option value="1">有音频</option>
                            <option value="2">无音频</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="validateBtn">添加展位
                </button>
                <!--onclick="saveIchnography()"-->
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="edit" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="max-height:800px;overflow-y:auto;overflow-x:hidden;background-color: #fff">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">展位修改</h4>
            </div>
            <form enctype="multipart/form-data" method="post" id="saveIchnographyForm1">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <img id="imagesFire" src="" alt="图片" style="width: 100%;height: 100%;">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="file" id="imgFile1" name="imgFile"/>
                            <input type="hidden" id="literatureImg1" name="literatureImg"/>
                        </div>

                    </div>
                    <div class="form-group" id="btn-su2">
                        <div class="col-lg-12">
                            <input type="file" id="papersFile1" name="papersFile"/>
                            <input type="hidden" id="literatureFile1" name="literatureFile"/>
                        </div>

                    </div>
                    <input type="hidden" id="exhibtionId1" name="exhibtionId" th:value="${exhibtionId}"/>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="literatureTitle"
                                   name="literatureTitle" placeholder="文章标题" required>

                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" id="literatureContent"
                                   name="literatureContent" placeholder="文章内容" required>
                        </div>
                    </div>
                    <!--<input type="text" class="form-control" style="margin-top: 20px" id="literatureType" name="literatureType" placeholder="文章类型">-->
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control" name="literatureX"
                                   id="literatureX1" placeholder="x轴坐标" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <input type="text" class="form-control"  name="literatureY"
                                   id="literatureY1" placeholder="y轴坐标" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <div class="col-lg-12">
                            <select name="literatureType" id="literatureType" class="form-control" placeholder="文章类型"
                                                 style="width: 100%;height: 100%;">
                            <option value="">--请选择--</option>
                            <option value="1">有音频</option>
                            <option value="2">无音频</option>
                        </select>
                        </div>

                    </div>
                    <div class="form-group">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-body">

                                        <hr/>
                                        <div class=""><img src="../static/images/time1.png"
                                                           th:src="@{/images/time1.png}" width="23px"
                                                           height="23px"><span class="time" id="timeS">2018-08-16</span>
                                        </div>
                                        <div class="" style="margin-top: 10px"><img src="../static/images/map1.png"
                                                                                    th:src="@{/images/map1.png}"
                                                                                    width="23px" height="23px"><span
                                                class="time">东华门，东南角落</span></div>
                                        <div class="intro">

                                        </div>
                                        <div class="slide"><img style="display: block;margin: 0 auto" width="40px"
                                                                height="25px" src="../static/images/slide.png"
                                                                th:src="@{/images/slide.png}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <!--<div class="panel-btns">-->
                                        <!--<a href="" class="panel-close">×</a>-->
                                        <!--<a href="" class="minimize">−</a>-->
                                        <!--</div>-->
                                        <h4 class="panel-title">展览 作品</h4>
                                    </div>
                                    <div class="panel-body" id="imagesUrl">

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="adut">
                        <!--音乐播放器 加载-->
                        <!--<audio controls="controls" height="100" style="width: 400px" controlsList="nodownload"-->
                        <!--id="adut">-->
                        <!--</audio>-->
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="literatureId" id="ichnographyId" value="">  <!-- 用来修改的文章Id-->
                    <input type="hidden" name="exhibitionId" th:value="${exhibtionId}"/>    <!--文章相关的展厅Id-->
                    <button type="button" class="btn btn-primary" id="updateliteratureId">
                        修改
                        <!--onclick="updateliteratureId()" data-dismiss="modal"-->
                    </button>
                    <button type="button" class="btn btn-danger" onclick="dele()">删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="update1" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">展厅信息修改</h4>
            </div>
            <div class="modal-body" th:object="${exhibitionList[0]}">
                <form enctype="multipart/form-data" method="post" id="saveForm">
                    <input type="hidden" class="form-control" name="exhibitionId" th:value="${exhibtionId}"/>
                    <div class="form-group" style="margin-top: 20px">
                        <input type="text" class="form-control"
                               name="exhibitionName" placeholder="文章标题" th:value="*{exhibitionName}">
                    </div>
                    <div class="form-group" style="margin-top: 20px">
                        <input type="text" class="form-control"
                               name="exhibitionContent" placeholder="文章内容" th:value="*{exhibitionContent}">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="saveForm1">修改展厅信息 <!--onclick="saveForm1()"-->
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="col-sm-12" style="height: auto">
    <div class="row exHall" style="width: 100%;height: 30px; line-height: 30px;font-size: 16px;">
        <span>展厅信息</span>
        <button type="button" class="btn btn-info btn-sm pull-right" onclick="black()">返回</button>
    </div>
    <div class="row" style="margin-top: 20px;">
        <div class=" col-md-6" th:object="${exhibitionList[0]}">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="bjx1" id="hallImg">

                        <!--<div class="imgHall" style="border:1px solid #000;border-radius: 50%;position:absolute;left: 10%;top: 10%;background-image: url('http://60.219.169.118:8099/smart_community/1535510420549.jpg');-->
                        <!--background-position: center center;background-repeat: no-repeat;background-size: 100% 100%;">-->
                        <!--<div style=";  width: 40px;height: 40px; margin: 0 auto; margin-top: 4px; text-align: center;line-height: 40px;font-size: 42px;-->
                        <!--font-family: -webkit-pictograph;font-weight: bold;">1</div>-->
                        <!--</div>-->
                    </div>
                    <!--<img class="thmb1-imge" id="hallImg" style="height:400px;width:100%;background-size: 100% 100%"-->
                    <!--th:src="${showUrl}+imges+'/' + *{exhibitionImg}" onclick="editHall(this)"/>-->

                </div>
            </div>
        </div>
        <div class="col-md-6" th:object="${exhibitionList[0]}">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="alert alert-success" style="position: relative">
                        <span href="" class="alert-link" style="font-size: 18px;text-decoration: none"
                              th:text="*{exhibitionName}"></span>
                        <sub style="margin-left: 3px;font-size: 75%;line-height: 16px;position: absolute;top: -9px;bottom: 15px;left: 15px; background: #dff0d8;; height: 16px;width: 100px;text-align: center;border-top:1px solid #d6e9c6"><i>展厅名</i></sub>
                    </div>

                    <div class="alert alert-info" style="position: relative">
                        <span class="alert-link" style="font-size: 16px;text-decoration: none"
                              th:text="*{exhibitionContent}"></span>
                        <sub style="margin-left: 3px;font-size: 75%;line-height: 16px;position: absolute;top: -9px;bottom: 15px;left: 15px; background: #d9edf7; height: 16px;width: 100px;text-align: center;border-top:1px solid #bce8f1 "><i>展厅内容</i></sub>
                    </div>
                    <div class="col-md-12 pull-right">
                        <button class="btn btn-primary" onclick="addBooth()">新增展位信息</button>
                        <button class="btn btn-primary" onclick="updateHall()">修改展厅信息</button>
                    </div>

                </div>
            </div><!-- panel -->
        </div>
        <!--<div class="col-md-3">-->

        <!--</div>-->
    </div>
    <div class="row exHall" style="width: 100%;height: 30px; line-height: 30px;font-size: 16px;margin-top: 20px;">
        展位信息
    </div>
    <div class="row filemanager" style="margin-top: 20px;margin-top: 20px;height: 244px;overflow: auto;">
        <div class="col-xs-6 col-sm-4 col-md-3" th:each="list,index:${literatureList} ">
            <div class="thmb">
                <div class="thmb-prev">
                    <img th:src="${showUrl}  + ${list.literatureImg}"
                         style="height:170px;width:100%;background-size: 100% 100%"
                         onclick="edit(this)" class="img-responsive" alt="" th:id="${list.literatureId}">
                </div>
                <h5 class="fm-title flot-left" th:text="${list.literatureTitle}"></h5>
                <h5 class="fm-title flot-right" th:text="${index.count}"></h5>
            </div>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 document">
            <div class="thmb">
                <div class="thmb-prev">
                    <img src="images/photos/media-doc.png"
                         style="height:170px;width:100%;background-size: 100% 100%" class="img-responsive" alt=""
                         data-toggle="modal" data-target="#myModal">
                </div>
                <h5 class="fm-title">增加展位</h5>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var exhibitionList = [[${exhibitionList}]];
    var literatureList = [[${literatureList}]];
    var showurl = [[${showUrl}]];
    var ichnographyId = [[${ichnographyId}]]
    var exhibitionId = exhibitionList[0].exhibitionId;
    //页面初始化当前页面展位位置
    $(function () {
        var url = showurl + 'imges/' + exhibitionList[0].exhibitionImg;
        $(".bjx1").css('background-image', "url(" + url + ")");
        //展示展位
        var str = "";
        literatureList.forEach(function (item, index) {
            var index = index + 1;
            var x = item.literatureX + "%";
            var y = item.literatureY + "%";
            str += "<div class=\"imgHall\" style=\"border:1px solid #000;border-radius: 50%; margin-left:-25px;margin-top:-25px;position:absolute;top:" + y + ";left:" + x + " ;\n" +
                "background-position: center center;background-repeat: no-repeat;background-size: 100% 100%;\">\n" +
                "                            <div style=\";  width: 40px;height: 40px; margin: 0 auto; margin-top: 4px; text-align: center;line-height: 40px;font-size: 42px;\n" +
                "                            font-family: -webkit-pictograph;font-weight: bold;\">" + index + "</div>\n" +
                "                        </div>";
        });
        $(".bjx1").append(str);

    });

    //点击页面新增展位
    var x = "";
    var y = "";
    $('#hallImg').click(function (e) {
        if ($("#imgHall1").length > 0) {
            $("#imgHall1").remove();
        }
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var xx = e.pageX || e.clientX + scrollX;
        var yy = e.pageY || e.clientY + scrollY;
//        var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
//        var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
        var cdimg1 = $('#hallImg').width();
        x = ((xx - $(this).offset().left - 2) / cdimg1 * 100).toFixed(2); //宽
        y = ((yy - $(this).offset().top - 2) / 400 * 100).toFixed(2); //高
        $("#literatureX").val(x);
        $("#literatureY").val(y);
        var x1 = x + "%";
        var y1 = y + "%";
        //创建一个div和 div标签内的img标签 在添加到当前div框中
        var DIV = document.createElement("div");
        DIV.setAttribute('class', 'imgHall');
        DIV.setAttribute('id', 'imgHall1');
        DIV.setAttribute('style', "margin-top:-25px;margin-left:-25px;position:absolute;left:" + x1 + ";top:" + y1 + "")
        var Img = document.createElement("IMG");
        Img.setAttribute("src", "images/image/spot.png");
        DIV.append(Img);
        $(this).append(DIV)
    });

    //返回
    function black() {
        if(ichnographyId==1){
            $.goTo(/*[[@{ichnography/ichnographyOne}]]*/"./floor_show.html");
        }else if(ichnographyId==2){
            $.goTo(/*[[@{ichnography/ichnographyTwo}]]*/"./floor_show.html");
        }else if(ichnographyId==3){
            $.goTo(/*[[@{ichnography/ichnographyThree}]]*/"./floor_show.html");
        }
//
    }
    //新增展位页面
    //    function saveIchnography() {
    //        var exhibtionId = $("#exhibtionId").val();
    //        var saveIchnographyForm = $("#saveIchnographyForm").serialize();
    //        var literatureTitle1 = $("#literatureTitle1").val();
    //        var select = $("#select").val();
    //        var literatureContent1 = $("#literatureContent1").val();
    //        if (literatureTitle1 == "" || select == "" || literatureContent1 == "") {
    //                $("#myModal").modal("show")
    //            $.MsgBox.Confirm("提示","是否要进行下一步",function () {
    //            })
    //        } else {
    //            $.post("/literature/saveLiterature", saveIchnographyForm, function (data) {
    //                if (data > 0) {
    //                    alert("成功");
    //                    $.goTo(/*[[@{/literature/literatureList}]]*/"./floor_show.html", {"exhibtionId": exhibtionId});
    //                } else {
    //                    alert("失败");
    //                }
    //            });
    //        }
    //
    //    }

    //新增展位信息按钮
    function addBooth() {
        $("#myModal").modal("show")
    }

    //编辑当前文章信息
    var id = "";
    var literatureId = "";

    function edit(obj) {
        id = $(obj).attr("id");
        $("#ichnographyId").val(id);
        literatureId = id;
        //阅读点击量
        $.post('literature/updateLiteratureForCount', {"literatureId": id}, function (data) {
        });
        var showurl = [[${showUrl}]];
        $.post("literature/findOneForLiterature", {"literatureId": id}, function (data) {
            var audiourl = showurl + data.literatureFile;
            $("#literatureTitle").val(data.literatureTitle);
            $("#literatureContent").val(data.literatureContent);
            $("#literatureType").val(data.literatureType);
            $("#imagesFire").attr("src", showurl  + data.literatureImg);
            $("#fileFire").attr("href", showurl + data.literatureFile);
            $("#footer-title").val(data.ichnographyName);
            $("#literatureImg1").val(data.literatureImg);
            $("#literatureFile1").val(data.literatureFile);
            if (x == "") {
                $("#literatureX1").val(data.literatureX);
                $("#literatureY1").val(data.literatureY);
            } else if (x != "") {
                $("#literatureX1").val(x);
                $("#literatureY1").val(y);
            }
            $(".intro").text(data.literatureContent);
            if (data.literatureFile != "") {
                myFunction(audiourl)
            } else {
                $("#adut").empty()
            }

            if (data.literatureType == "2") {
                $("#btn-su2").css('display', "none")
                $("#adut").css('display', "none")
            } else if (data.literatureType == "1") {
                $("#btn-su2").css('display', "block")
                $("#adut").css('display', "block")
            }
            var str = "";

            $("#imagesUrl").empty()
            if (data.literatureChildList.length > 0) {
                $("#imagesUrl").empty()
                data.literatureChildList.forEach(function (t) {
                    str += "<div class=\"col-md-6 \">\n" +
                        "     <img src=" + showurl + t.literatureChildImg + " onclick='gotoE()' style=\"width: 100%;height: 230px;display: block;background-size: 100% 100%\" alt=\"\">\n" +
                        "      <span style=\"display: block;text-align: center;margin-top: 10px\">" + t.literatureChildTitle + "</span>\n" +
                        "</div>"
                });
            } else {
                $("#imagesUrl").empty();
                str += "<button class=\"btn btn-primary\" type=\"button\" onclick='btnGo1()' >添加子文章</button>"
            }
            $("#imagesUrl").append(str)
//            $("#audioSrc").attr('src',audiourl);
        });
        $('#edit').modal('show');
    }

    //创建mp3
    function myFunction(y) {
        $("#adut").empty()


        $("#adut").empty()
        var x = document.createElement("AUDIO");
        x.setAttribute("src", y);
        x.setAttribute("controlsList", "nodownload");
        x.setAttribute("controls", "controls");
        $("#adut").append(x);
    }

    //当没有文章信息的时候按钮跳转
    function btnGo1() {
        $.goTo(/*[[@{literatureChild/literatureChildList}]]*/"./literature.html", {
            "literatureId": literatureId,
            "exhibtionId": exhibitionId,
            "ichnographyId": ichnographyId
        });
    }

    //当页面有文章信息的时候按钮跳转
    function gotoE() {
        $('#edit').modal('hide');
        $('#edit').attr('data-dismiss', 'modal');
        $.goTo(/*[[@{literatureChild/literatureChildList}]]*/"./literature.html", {
            "literatureId": literatureId,
            "exhibtionId": exhibitionId,
            "ichnographyId": ichnographyId
        });
    }

    /*]]>*/
</script>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    //删除展位
    function dele() {
        var exhibtionId = $("#exhibtionId").val();
        $.post("literature/deleteLiterature", {"exhibitionId": id}, function (data) {
            if (data > 0) {

                $.MsgBox.Alert("提示","删除成功")
                $(".modal-backdrop").remove();
                $('#edit').modal('hide');
                $.goTo(/*[[@{literature/literatureList}]]*/"./floor_show.html", {
                    "literatureId": literatureId,
                    "exhibtionId": exhibitionId,
                    "ichnographyId": ichnographyId
                });
            } else {

                $.MsgBox.Alert("提示","删除失败")
            }
        })
        $('#edit').modal('hide');
    }

    function goToExhibition(obj) {
        var id = $(obj).attr("id");
    }


    $("#select").on("change", function () {
        if ($(this).val() == "2") {
            $("#btn-su").css('display', "none")
        } else if ($(this).val() == "1") {
            $("#btn-su").css('display', "block")
        }
    });
    $("#literatureType").on("change", function () {
        if ($(this).val() == "2") {
            $("#btn-su2").css('display', "none")
        } else if ($(this).val() == "1") {
            $("#btn-su2").css('display', "block")
        }
    });

    $(function () {
        $(".slide").click(function () {
            $(".intro").slideToggle(function () {
//                $(this).css("height","500px")
            })
        })
    });
    $(function () {
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        //获取点击的图片元素
        var cdimg = $('.fileImgs1').children('img');
        //获取上传图片的 input 标签元素
        var cdfile = $('.fileImgs1').children('input[type="file"]');
        //设置input 大小和图片一致
        cdfile.css({'width': cdimg.css('width'), 'height': cdimg.css('height')});
        //input透明度为0,定位，优先级比图片高
        cdfile.css({'opacity': 0, 'position': 'absolute', 'z-index': 10});
        //判断input的图片文件改变则img的图片也替换为input选择的图片
        cdfile.change(function () {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl) {
                    $(this).siblings('img').attr("src", objUrl);
                }
            }
        });
        //获取点击的图片元素
        var cdimg1 = $('.fileImgs1').children('img');
        //获取上传图片的 input 标签元素
        var cdfile1 = $('.fileImgs1').children('input[type="file"]');
        //设置input 大小和图片一致
        cdfile1.css({'width': cdimg1.css('width'), 'height': cdimg1.css('height')});
        //input透明度为0,定位，优先级比图片高
        cdfile1.css({'opacity': 0, 'position': 'absolute', 'z-index': 10});
        //判断input的图片文件改变则img的图片也替换为input选择的图片
        cdfile1.change(function () {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl) {
                    $(this).siblings('img').attr("src", objUrl);
                }
            }
        });
    })

    //修改展厅信息
    function updateHall() {
        $("#update1").modal('show')
    }

    /*]]>*/
</script>

<!--上传文件-->
<script type="text/javascript" th:inline="javascript">
    $("#imgFile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getImgFileName", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        browseLabel: '图片上传',
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureImg").val(data.response);
    });
    $("#papersFile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getPapersFileName", //上传的地址
        allowedFileExtensions: ['mp3'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        browseLabel: '音频上传',
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureFile").val(data.response);
    });
    //    编辑
    $("#imgFile1").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getImgFileName", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        browseLabel: '图片上传',
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureImg1").val(data.response);
    });
    $("#papersFile1").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getPapersFileName", //上传的地址
        allowedFileExtensions: ['mp3'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        browseLabel: '音频上传',
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureFile1").val(data.response);
    });
</script>
<!--验证-->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        $('#saveIchnographyForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {  //startTimeToDate
                literatureTitle: {
                    validators: {
                        notEmpty: {
                            message: '请填写文章标题'
                        }
                    }
                },
                literatureContent: {
                    validators: {
                        notEmpty: {
                            message: '请填写文章内容'
                        }
                    }
                },
                literatureX: {
                    validators: {
                        notEmpty: {
                            message: "请获取X轴坐标"
                        }
                    }
                },
                literatureY: {
                    validators: {
                        notEmpty: {
                            message: '请获取Y轴坐标'
                        }
                    }
                }

            }
        });
        $('#validateBtn').click(function () {
            $('#saveIchnographyForm').data('bootstrapValidator')
                .updateStatus('literatureX', 'NOT_VALIDATED', null)
                .validateField('literatureX');
            $('#saveIchnographyForm').data('bootstrapValidator')
                .updateStatus('literatureY', 'NOT_VALIDATED', null)
                .validateField('literatureY');

            $('#saveIchnographyForm').bootstrapValidator('validate');
            var flag = $('#saveIchnographyForm').data('bootstrapValidator').isValid();
            if (flag) {
                var exhibtionId = $("#exhibtionId").val();
                var saveIchnographyForm = $("#saveIchnographyForm").serialize();

                $.post("literature/saveLiterature", saveIchnographyForm, function (data) {
                    if (data > 0) {
                        $.MsgBox.Alert("提示","新增成功")

                        $('#myModal').modal('hide');
                        $(".modal-backdrop").remove();
                        $.goTo(/*[[@{/literature/literatureList}]]*/"./floor_show.html", {"literatureId": literatureId,"exhibtionId":exhibitionId,"ichnographyId":ichnographyId});
                    } else {
                        $.MsgBox.Alert("提示","新增失败")
                    }
                });
            } else {
                return;
            }
        });
        $("#saveIchnographyForm1").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {  //startTimeToDate
                literatureTitle: {
                    validators: {
                        notEmpty: {
                            message: '请填写文章标题'
                        }
                    }
                },
                literatureContent: {
                    validators: {
                        notEmpty: {
                            message: '请填写文章内容'
                        }
                    }
                },
                literatureX: {
                    validators: {
                        notEmpty: {
                            message: "请获取X轴坐标"
                        }
                    }
                },
                literatureY: {
                    validators: {
                        notEmpty: {
                            message: '请获取Y轴坐标'
                        }
                    }
                }

            }
        });
        $('#updateliteratureId').click(function () {
            $('#saveIchnographyForm1').data('bootstrapValidator')
                .updateStatus('literatureX', 'NOT_VALIDATED', null)
                .validateField('literatureX');
            $('#saveIchnographyForm1').data('bootstrapValidator')
                .updateStatus('literatureY', 'NOT_VALIDATED', null)
                .validateField('literatureY');
            $('#saveIchnographyForm1').bootstrapValidator('validate');
            var flag = $('#saveIchnographyForm1').data('bootstrapValidator').isValid();
            if (flag) {
                var exhibtionId = $("#exhibtionId").val();
                var saveIchnographyForm = $("#saveIchnographyForm1").serialize();
                $.post("literature/updateLiterature", saveIchnographyForm, function (data) {
                    if (data > 0) {
//                        alert("修改成功");
                        $.MsgBox.Alert('提示',"修改成功");
                        $('#edit').modal('hide');
                        $(".modal-backdrop").remove();
                        $.goTo("literature/literatureList", {
                            "literatureId": literatureId,
                            "exhibtionId": exhibitionId,
                            "ichnographyId": ichnographyId
                        });
                    } else {
//                        alert("修改失败");
                        $.MsgBox.Alert('提示',"修改失败");
                    }
                });
            } else {
                return;
            }
        });
        $("#saveForm").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {  //startTimeToDate
                exhibitionName: {
                    validators: {
                        notEmpty: {
                            message: '请填写文章标题'
                        }
                    }
                },
                exhibitionContent: {
                    validators: {
                        notEmpty: {
                            message: '请填写文章内容'
                        }
                    }
                }
            }
        });
        $('#saveForm1').click(function () {
            $('#saveForm').bootstrapValidator('validate');
            var flag = $('#saveForm').data('bootstrapValidator').isValid();
            if (flag) {
                var exhibtionId = $("#exhibtionId").val();
                var saveIchnographyForm = $("#saveForm").serialize();
                $.post("exhibition/updateExhibition", saveIchnographyForm, function (data) {
                    if (data > 0) {

                        $.MsgBox.Alert("提示","修改成功")
                        $('#update1').modal('hide');
                        $(".modal-backdrop").remove();
                        $.goTo(/*[[@{literature/literatureList}]]*/"./floor_show.html", {
                            "literatureId": literatureId,
                            "exhibtionId": exhibitionId,
                            "ichnographyId": ichnographyId
                        });
                    } else {

                        $.MsgBox.Alert("提示","修改失败")
                    }
                })
            } else {
                return;
            }
        });
    });

    $(document).click(function (e) {
       if(e.target["id"] ==""){
          $("#imgHall1").empty()
       }
    })
    /*]]>*/
</script>